<!-- <script lang="ts">
  export default {
    name: 'Home',
  }
</script> -->

<script setup lang="ts" name="Home">
import { defineAsyncComponent ,onMounted , reactive , computed } from 'vue';
import { getCategoryData , getLast30DaysSaleData , getMemberTop10Data } from '@/api/home';
import { useLayoutConfigStore } from '@/stores/layoutConfig';
const StatisticsBlock = defineAsyncComponent(() => import('@/views/home/components/statisticsBlock.vue'));
const PieChart = defineAsyncComponent(() => import('@/components/echarts/pieChart.vue'));
const LineChart = defineAsyncComponent(() => import('@/components/echarts/lineChart.vue'));
const BarChart = defineAsyncComponent(() => import('@/components/echarts/barChart.vue'));
const GaugeChart = defineAsyncComponent(() => import('@/components/echarts/gaugeChart.vue'));

const layoutConfig = useLayoutConfigStore();

const theme = computed(() => layoutConfig.isDrak ? 'dark' : '');
const bgColor = computed(() => layoutConfig.isDrak ? 'transparent' : '');

const state = reactive({
  category: {
    loading: false,
    data: [],
  },
  last30Days: {
    loading: false,
    xAxisData: [] as string [],
    data: [] as any,
  },
  memberTop10: {
    loading: false,
    xAxisData: [] as string [],
    data: [] as number [],
  }
})

onMounted(() => {
  loadCategoryData();
  loadLast30DaysSaleData();
  loadMemberTop10Data();
});

//分类销售统计数据查询
async function loadCategoryData() {
  try {
    state.category.loading = true;
    const { data } = await getCategoryData();
    state.category.data = data;
  } catch (error) {
  } finally { 
    state.category.loading = false;
  }
}

async function loadLast30DaysSaleData() {
  try {
    state.last30Days.loading = true;
    const { data } = await getLast30DaysSaleData();
    const {
      last30Days, orderNumList, rechargeMoneyList,
      returnMoneyList, saleMoneyList
    } = data;
    state.last30Days.xAxisData = last30Days;
    state.last30Days.data = [
      {typeName: '订单数', list: orderNumList},
      {typeName: '销售额', list: saleMoneyList},
      {typeName: '退款额', list: returnMoneyList},
      {typeName: '充值额', list: rechargeMoneyList},
    ]
    //console.log('state.last30Days.data',state.last30Days)
  } catch (error) {
  } finally { 
    state.last30Days.loading = false;
  }
}

async function loadMemberTop10Data() {
  try {
    state.memberTop10.loading = true;
    const { data } = await getMemberTop10Data();
    state.memberTop10.xAxisData.length = 0;
    state.memberTop10.data.length = 0;
    data.forEach((item:any) => {
      state.memberTop10.xAxisData.push(item.name);
      state.memberTop10.data.push(item.consumeMoney);
    });
  } catch (error) {
  } finally { 
    state.memberTop10.loading = false;
  }
}

</script>

<template>
  <div>
    <StatisticsBlock/>
    <el-row :gutter="15">
      <el-col v-loading="state.category.loading" :xs="24" :sm="24" :md="11" :lg="9" class="mb15">
        <!--分类销售统计饼图-->
        <PieChart 
        title="分类销售统计" 
        subtitle="每种商品分类的近30天销售数据"
        :data="state.category.data"
        :theme="theme"
        :bgColor="bgColor"
      />
      </el-col>
      <el-col v-loading="state.last30Days.loading" :xs="24" :sm="24" :md="13" :lg="15" class="mb15">
        <LineChart 
        title="近30天销售趋势"
        :xAxisData="state.last30Days.xAxisData"
        :data="state.last30Days.data"
        :theme="theme"
        :bgColor="bgColor"
        />
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col v-loading="state.memberTop10.loading" :xs="24" :sm="24" :md="13" :lg="15" class="mb15">
        <BarChart 
        title="会员消费Top10"
        :theme="theme"
        :bgColor="bgColor"
        :data="state.memberTop10.data"
        :xAxisData="state.memberTop10.xAxisData"
        />
      </el-col>
      <el-col :xs="24" :sm="24" :md="11" :lg="9" class="mb15">
        <GaugeChart
        title="气温仪表盘 °C"
        :theme="theme"
        :bgColor="bgColor"
        :data="38"
        />
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>

</style>